<template>
    <el-popover placement="right" trigger="click" style="width:500px" v-model="visible">
        <el-container
                style="width:100%;background-color: #ffffff;height: 100%"
                title="图层属性" id="layerAttr">
            <!--<el-tabs v-model="activeName" type="card" @tab-click="handleClick">-->
            <!--<template v-for="(item,index) in tabPaneArray">-->
            <!--<el-tab-pane :label="item.label" :name="item.name">-->
            <el-header style="height:30px;padding: 0">
                <div style="background-color: #ffffff;height: 100%">
                    <span style="margin-left: 10px;
    padding-top: 5px;
    display: inline-block;">图层属性表</span>
                    <i class="el-icon-error" @click="clearLayerAttr" style="float: right;margin: 5px 5px 0 0;"> </i>
                </div>
            </el-header>
            <el-main style="height: 100%;padding: 0;overflow: hidden;width:100%">
                <el-table :data="layerAttrData" empty-text=" " style="max-height: 180px;overflow: auto;max-width: 463px"
                          @row-click="showFeature" height="305px">
                    <el-table-column
                            type="index"
                            width="50px"
                            fixed>
                    </el-table-column>
                    <el-table-column
                            label="定位"
                            width="50"
                            align="center"
                            fixed>
                        <template slot-scope="scope">
                            <i @click="toAttrPosition(scope.row)" class="el-icon-aim"></i>
                        </template>
                    </el-table-column>
                    <el-table-column
                            v-for="item in headers"
                            v-if="item !== 'docId'"
                            :property="item"
                            :label="item"
                            :key="item"
                            min-width="120px"
                            align="center"
                            width="fit-content">
                    </el-table-column>
                </el-table>
            </el-main>
            <el-footer style="height: 40px;padding-top: 10px">
                <div style="background-color: #ffffff">
                    <el-pagination
                            background
                            :page-size="pageSize"
                            :total="totalSize"
                            :current-page="pageNo"
                            layout="prev, pager, next"
                            @current-change="layerAttrPageChange"
                            style="margin:0;text-align: center">
                    </el-pagination>
                </div>
            </el-footer>
            <!--</el-tab-pane>-->
            <!--</template>-->
            <!--</el-tabs>-->
        </el-container>
    </el-popover>
</template>

<script>
    // import '../../../static/js/divDrag'
    import {booleanPointInPolygon,getGeom, bbox, point, polygon} from '../../../static/js/turf.min'

    export default {
        name: "layerAttrDialog",
        data() {
            return {
                // tabPaneArray: [],
                visible: false,
                // activeName: "name1",
                // i: 1,
                pageSize: 5,
                pageNo: 1,
                totalSize: 0,
                headers: [],
                esPath: '',
                layerAttrData: []
            }

        },
        computed: {},
        methods: {
            handleClick() {

            },
            clearLayerAttr() {
                // this.tabPaneArray = [];
                this.visible = false;
                if (this.$globalConstant.map.getLayer('layerAttFeature')) {
                    this.$globalConstant.map.removeLayer('layerAttFeature');
                    this.$globalConstant.map.removeSource('layerAttFeature');
                }
            },
            showFeature(row) {
                //如果是pg类型，即this.url为"",则row.st_asgeojson存着坐标信息
                let that = this;
                if (this.$globalConstant.map.getLayer("layerAttFeature")) {
                    this.$globalConstant.map.removeLayer('layerAttFeature');
                    this.$globalConstant.map.removeSource('layerAttFeature');
                }
                let url = this.$URL.showFeatureUrl+this.esPath+"/" + row.docId;
                this.$axios.post(url).then(res => {
                    if (res.code === 200) {
                        let features = JSON.parse(res.body);
                        // let bbPolygon = polygon([dd.features[0].geometry.coordinates[0]]);
                        // let box = bbox(bbPolygon);
                        let layerIndex = '';
                        for (let i = 0; i < this.$globalConstant.map.style._order.length; i++) {
                            if (that.$globalConstant.map.style._order[i].substring(0, 2).indexOf('gl') !== -1) {
                                layerIndex = this.$globalConstant.map.style._order[i];
                                break
                            }
                        }
                            that.$globalConstant.map.addLayer({
                                "id": 'layerAttFeature',
                                "source": {
                                    "type": "geojson",
                                    "data": features.features[0]
                                },
                                "type": "fill",
                                "paint": {
                                    "fill-color": "red"
                                }
                            }, layerIndex);
                        console.log(that.$globalConstant.map.style._order)
                    }
                }).catch(function (error) {

                });
            },
            toAttrPosition(row) {
                let that = this;
                let url = this.$URL.showFeatureUrl+this.esPath+"/" + row.docId;
                this.$axios.post(url).then(res => {
                    if (res.code === 200) {
                        let features = JSON.parse(res.body);
                        let geom = getGeom(features.features[0]);
                        let box = bbox(geom);
                        this.$globalConstant.map.fitBounds(box);
                    }
                }).catch(function (error) {

                });

            },
            getLayerAttr() {
                let that = this;
                that.layerAttrData = [];
                let queryUrl = this.url + '?pageSize=' + this.pageSize + "&pageNo=" + this.pageNo;
                that.$axios.post(queryUrl).then(res => {
                    if (res.code === 200) {
                        for (let item of res.body.records) {
                            // item.att.area=item.att.area.toString().substring(0,10);
                            that.layerAttrData.push(item.att);
                        }
                        that.headers = [];
                        that.totalSize = res.body.totalSize;
                        for (let key in res.body.records[0].att) {
                            that.headers.push(key);
                        }

                        that.visible = true;
                    } else {
                        that.$message({
                            type: "warning",
                            message: res.message
                        })
                    }
                }).catch(function (error) {
                    console.log(error);
                    that.$message.error("")
                });
            },
            layerAttrPageChange(currentPage) {
                this.pageNo = currentPage;
                this.getLayerAttr();
            }
        },
        created() {
            let that = this;
            this.$Bus.$on("attrDataUrl", url => {
                if (url !== undefined) {
                    //如果on的url为空，则图层是根据pg里的数据切出来的，则各函数应先判断再发送请求
                    // let name = "name" + this.i;
                    // this.i++;
                    this.esPath=url;
                    that.url = that.$URL.datasetPreviewUrl+url;
                    that.getLayerAttr();
                    // $('#layerAttr').draggable();
                    // let paneData = {label: "layer", name: name, data: []};
                    // that.tabPaneArray.push(paneData);
                }
            });
            this.$Bus.$on('closelayerAttr', res => {
                that.visible = res;
                that.layerAttrData = [];
                if (that.$globalConstant.map.getLayer('layerAttFeature')) {
                    that.$globalConstant.map.removeLayer('layerAttFeature');
                    that.$globalConstant.map.removeSource('layerAttFeature');
                }
            })
        }
    }

</script>

<style>
    #layerAttr .el-dialog__wrapper {
        width: 70%;
        margin-left: 30%;
        overflow: auto;
    }

    #layerAttr .el-dialog {
        width: 100%;
    }

    #layerAttr .el-dialog__body {
        height: 100%;
        padding-bottom: 10px;
    }

    #layerAttr .el-dialog .el-dialog--small {
        height: 75%;
    }

    #layerAttr .el-dialog__title {
        font-family: "Times New Roman";
    }

</style>